import React, { memo, useState, useRef, useEffect } from "react";
import { Modal } from "antd";

type Payload = {
    onOk?(): void;
    onCancel?(): void;
    [others: string]: any;
};

type ModalType = React.NamedExoticComponent & { show(payload: Payload): void };

const Modal4: ModalType = memo(
    (_props, ref) => {
        const [visible, setVisible] = useState(false);
        const payloadRef = useRef<Payload>({});
        useEffect(() : any => {
            const lastShow = Modal4.show;

            Modal4.show = (payload: Payload) => {
                setVisible(true);
                payloadRef.current = payload;
            };

            return () => (Modal4.show = lastShow);
        }, []);

        const wrapWithClose = (method?: () => void) => () => {
            setVisible(false);
            method && method();
        };

        const onOk = () => {
          console.log('1231')
        }


        return (
            <Modal
                title="新增用户"
                visible={visible}
                onOk={wrapWithClose(payloadRef.current.onOk)}
                onCancel={wrapWithClose(payloadRef.current.onCancel)}
            >
                <div>...</div>
            </Modal>
        );
    },
    () => true
) as any;

Modal4.show = (payload: Payload) => console.log("Modal4 is not mounted.");

export default Modal4;
